<template>
  <a-layout-sider
    :theme="sideTheme"
    :class="['side-menu', 'beauty-scroll', isMobile ? null : 'shadow']"
    width="230px"
    :collapsible="collapsible"
    v-model="collapsed"
    :trigger="null"
  >
    <div :class="['logo', theme]" :style="{ width: sideLogoWidth }">
      <router-link to="/excessive">
        <img :src="systemLogo" alt="logo" />
        <h1 v-if="!isShowTitle">{{ systemName }}</h1>
      </router-link>
    </div>
    <i-menu
      :theme="themes"
      :collapsed="collapsed"
      :menu="menuData"
      @select="onSelect"
      class="menu"
    />
  </a-layout-sider>
</template>

<script>
import IMenu from "./menu";
import { mapState, mapGetters } from "vuex";
export default {
  name: "SideMenu",
  components: { IMenu },
  props: {
    collapsible: {
      type: Boolean,
      required: false,
      default: false,
    },
    collapsed: {
      type: Boolean,
      required: false,
      default: false,
    },
    menuData: {
      type: Array,
      required: true,
    },
    theme: {
      type: String,
      required: false,
      default: "dark",
    },
    isShowTitle: {
      type: Boolean,
      required: false,
      default: false,
    },
  },
  data() {
    return {
      themes: "dark",
    };
  },
  computed: {
    sideTheme() {
      if (this.theme == "mix" || this.theme == "honeywell") {
        return (this.themes = "light");
      } else {
        return (this.themes = this.theme == "light" ? this.theme : "dark");
      }
    },
    ...mapState("setting", ["isMobile", "systemName"]),
    ...mapGetters(["configData"]),
    systemName() {
      let index = this.configData.findIndex(
        (item) => item.code === "systemName"
      );
      if (index >= 0) {
        return this.configData[index].value;
      } else {
        return "低代码开发平台";
      }
    },
    systemLogo() {
      let index = this.configData.findIndex(
        (item) => item.code === "systemLogo"
      );
      if (index >= 0) {
        return this.configData[index].value;
      } else {
        return "https://zysd-shanghai.oss-cn-shanghai.aliyuncs.com/emis/logo.png";
      }
    },
    sideLogoWidth() {
      return this.collapsed ? "80px" : "230px";
    },
  },
  methods: {
    onSelect(obj) {
      this.$emit("menuSelect", obj);
    },
  },
};
</script>

<style lang="less" scoped>
@import "index";
.logo {
  position: fixed !important;
  z-index: 999;
  a {
    height: 54px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }
  img {
    height: auto;
    position: relative;
  }
}
.menu {
  margin-top: 54px;
}
.shadow {
  box-shadow: none !important;
}
/deep/.ant-menu.ant-menu-dark
  .ant-menu-sub.ant-menu-inline
  > .ant-menu-item
  .anticon {
  color: @gray-1 !important;
}
</style>
